import { Space, Table, Tag, Row, Col, Button, Modal, Switch } from "antd";
import type { ColumnsType } from "antd/es/table";
import React, { useState, useEffect } from "react";
import CategoryForm from "./components/CategoryForm";
import { categoryGet, categoryPut } from "@/api/course";
import { CategoryType } from "@/types/course";
interface CategoryTableType extends CategoryType {
  children: CategoryType[];
}
const Category: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [data, setData] = useState<Array<CategoryTableType>>([]);
  const columns: ColumnsType<CategoryType> = [
    {
      title: "类目ID",
      dataIndex: "objectId",
      key: "objectId",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "类目名称",
      dataIndex: "cateName",
      key: "cateName",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "上架状态",
      dataIndex: "status",
      key: "status",
      render: (bool, record, index) => (
        <Switch
          checked={bool}
          onChange={() => {
            handleStatus(record, index);
          }}
        />
      ),
    },
    {
      title: "操作",
      render: () => {
        return (
          <Space>
            <Button type="primary" size="small">
              编辑
            </Button>
            <Button type="primary" size="small" danger>
              删除
            </Button>
          </Space>
        );
      },
    },
  ];
  const handleStatus = (record: CategoryType, index: number) => {
    // console.log(record, index);
    let { fatherId, status, objectId } = record;
    categoryPut(objectId, !status).then((res) => {
      if (fatherId == "0-0") {
        //修改父级类目
        data[index].status = !status;
      } else {
        //获取父级类目序号
        let fIdx: number = data.findIndex((item) => item.objectId == fatherId);
        // console.log(fIdx, index);
        data[fIdx].children[index].status = !status;
      }
      // console.log(data);
      setData([...data]);
    });
  };
  useEffect(() => {
    categoryGet().then((res) => {
      let arr: CategoryTableType[]; //按照类目层级存放类目数据
      let { results } = res.data;
      console.log(results); //处理前
      arr = results.filter((item: CategoryTableType) => item.fatherId == "0-0"); //找出主类目
      arr.forEach((item: CategoryTableType) => {
        //遍历主类目
        let children = results.filter(
          (child: CategoryTableType) => item.objectId == child.fatherId
        );
        item.children = children; //向指定主类目下，追加对应的子类目数据
      });
      console.log(arr); //处理后
      setData(arr);
    });
  }, []);
  return (
    <div>
      <Row justify="space-between" align="middle">
        <Col>课程分类管理</Col>
        <Col>
          <Button
            type="primary"
            onClick={() => {
              setIsModalOpen(true);
            }}
          >
            新增分类
          </Button>
        </Col>
      </Row>
      <Table columns={columns} dataSource={data} rowKey="objectId" />
      <Modal
        title="类目管理"
        open={isModalOpen}
        footer={null}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <CategoryForm setIsModalOpen={setIsModalOpen} cateList={data} />
      </Modal>
    </div>
  );
};

export default Category;
